<template>
 	<div id="home-body">
 		<header class="header-top">
 			 <div class="h-left">
                 <a href="">
                     <img src="http://pub.szzhangchu.com/web/v4.2/images/logo-white.png" width="100%">
                 </a>
 	        </div>
 	        <router-link class="h-mid" to="/Homess">
 	                <div class="search-content" data-url="/search_index/index.html?">
 	                    <div class="h-mid-2">
 	                    	<i class="hico"></i>请输入菜名或者食材搜索
 	                    </div>
 	                </div>
 	        </router-link>
 	        <div class="h-right" @click="login">
                 <!-- <router-link to="/Login"> -->
                     <img class="ico-login wimg" src="http://pub.szzhangchu.com/web/v4.2/images/login-white.png" width="100%">
                 <!-- </router-link> -->
 	        </div>
 		</header>

 		<!--导航-->
 		<div id="nav">
 			<router-link to="/" >首页</router-link>
 			<router-link to="/Meishi/Lfood" >美食</router-link>
 			<router-link to="/Meishi/Lhealth" >健康</router-link>
 			<router-link to="/Shicai/Lshicai" >食材</router-link>
 			<router-link to="/Shicai/Lcaipu" >万道佳肴</router-link>
 			<router-link :to="{name:'Zhuanti',params:{goodsId:'1111'}}" tag="a"  >专题</router-link>
 			<router-link to="/Changjing" >场景</router-link>
 			<router-link to="/Shequ" >社区</router-link>
 			<router-link to="/Huodong" >活动</router-link>
 			<router-link to="/Rumen/Choose" >新手入门</router-link>
 		</div>

 		<!--轮播图-->

 	<div class="banner">
         <div class="swiper-container swiper-container-horizontal">
             <div class="swiper-wrapper" id="banners-wrap">
                 <div class="swiper-slide">
                         <a href="http://h5.izhangchu.com/activity/view.html?&id=241?app_hideheader=1" target="_self">
                             <img src="http://img.szzhangchu.com/1501592534636_8494131640.jpg@640w_215h_1e_1c.jpg" class="wimg" alt="厨艺秀—菜谱有奖征集活动">
                         </a>
                     </div><div class="swiper-slide">
                         <a href="app://food_course_series#23#" target="_self">
                             <img src="http://img.szzhangchu.com/1501837940145_5845342801.jpg@640w_215h_1e_1c.jpg" class="wimg" alt="健康奶昔碗">
                         </a>
                     </div><div class="swiper-slide">
                         <a href="app://food_course_series#159#" target="_self">
                             <img src="http://img.szzhangchu.com/1501840093589_6244294723.jpg@640w_215h_1e_1c.jpg" class="wimg" alt="核桃香蕉酸奶杯">
                         </a>
                     </div><div class="swiper-slide">
                         <a href="app://food_course_series#136#" target="_self">
                             <img src="http://img.szzhangchu.com/1501838749247_3103687927.jpg@640w_215h_1e_1c.jpg" class="wimg" alt="水果果丹皮">
                         </a>
                     </div><div class="swiper-slide">
                         <a href="app://food_course_series#186#" target="_self">
                             <img src="http://img.szzhangchu.com/1501671061286_4677899697.jpg@640w_215h_1e_1c.jpg" class="wimg" alt="夏日饮品">
                         </a>
                     </div>
             </div>
             <div class="swiper-pagination swiper-pagination-clickable">
                 <span class="swiper-pagination-bullet"></span>
             </div>
         </div>
     </div>

 		<!--三分钟小炒-->
 		<div class="nav2">
                 <router-link to="/Shicai/Lcaipu">
                     <img src="http://pub.szzhangchu.com/web/v4.2/images/ico/xiaochao-ico.png" class="img">
                     <p>三分钟小炒</p>
                 </router-link>
                 <a href="#/Shicai/Lcaipu">
                     <img src="http://pub.szzhangchu.com/web/v4.2/images/ico/jiachangcai-ico.png" class="img">
                     <p>简易家常菜</p>
                 </a>

                 <router-link to="/Shicai/Lcaipu">
                     <img src="http://pub.szzhangchu.com/web/v4.2/images/ico/huncai-ico.png" class="img">
                     <p>荤菜帮</p>
                 </router-link>
                 <router-link to="/Shicai/Lcaipu">
                     <img src="http://pub.szzhangchu.com/web/v4.2/images/ico/sucai-ico.png" class="img">
                     <p>健康素菜</p>
                 </router-link>

                 <router-link to="/Shicai/Lcaipu">
                     <img src="http://pub.szzhangchu.com/web/v4.2/images/ico/haixian-ico.png" class="img">
                     <p>河鲜海味</p>
                 </router-link>
                 <router-link to="/Shicai/Lcaipu">
                     <img src="http://pub.szzhangchu.com/web/v4.2/images/ico/tang-ico.png" class="img">
                     <p>养生靓汤</p>
                 </router-link>
 	            <router-link class="nav2-2" to="/Shicai/Lcaipu">
 	                <div>万道佳肴<i class="ico ico-more"></i></div>
 	            </router-link>
 			</div>
 				<!--今日新品-->
 				<div id="xinpin">
 					<router-link class="xinp1" to="/xiawucha">
 	                	<div>今日新品<i class="ico ico-more"></i></div>
 	           		</router-link>
 	           		<div class="xinp2">
 	           			<div class="xinp2-1">
 	           				<a href="http:\/\/m.izhangchu.com\/web\/dishes_view\/index.html?&dishes_id=16292">
	 	           				<img src="http://img.szzhangchu.com/1496292581518_8834673982.JPG@180h_211w_1e_1c.jpg"/>
	 	           				<span class="xpico"></span>
	 	           				<p class="xinp2-1-1p">苹果鲜橙果饮</p>
	 	           				<p class="xinp2-1-2p">脆香爽口，营养全面，美味可口zz</p>
 	           				</a>
 	           			</div>
 	           			<div class="xinp2-1">
 	           				<a href="http:\/\/m.izhangchu.com\/web\/dishes_view\/index.html?&dishes_id=16342">
 	           					<img src="http://img.szzhangchu.com/1496400962204_2962018317.jpg@180h_211w_1e_1c.jpg"/>
	 	           				<span class="xpico"></span>
	 	           				<p class="xinp2-1-1p">苹果鲜橙果饮</p>
	 	           				<p class="xinp2-1-2p">脆香爽口，营养全面，美味可口zz</p>
 	           				</a>	
 	           			</div>
 	           			<div class="xinp2-1">
 	           				<a href="http:\/\/m.izhangchu.com\/web\/dishes_view\/index.html?&dishes_id=15043">
	 	           				<img src="http://img.szzhangchu.com/1463738600727_6926821617.jpg@180h_211w_1e_1c.jpg"/>
	 	           				<span class="xpico"></span>
	 	           				<p class="xinp2-1-1p">苹果鲜橙果饮</p>
	 	           				<p class="xinp2-1-2p">脆香爽口，营养全面，美味可口zz</p>
 	           				</a>
 	           			</div>
 	           		</div>
 				</div>

 	    		<!--下午茶情调-->
 	    		<div id="xwc">
 	    			<router-link class="xinp1" to="/xiawucha">
 	                	<div>下午茶情调<i class="ico ico-more"></i></div>
 	           		</router-link>
 	           		<div class="xwc2">
 	           			<div class="xwc2L">
 	           				<router-link to="/xiawucha">
 	           					<img src="http://img.szzhangchu.com/1456975926070_4969755890.jpg@288h_211w_1e_1c.jpg"/>
	 	           				<div class="xwc2Lp">
	 	           					<p>下午茶情调</p>
	 	           					<p>157道菜</p>
	 	           				</div>
	 	           				<div class="xwcbg">
	
	 	           				</div>
 	           				</router-link>
 	           				
 	           			</div>
 	           			<div class="xwc2R">
 	           				<div class="xwc2R-1">
 	           					<img src="http://img.szzhangchu.com/1441118155574_7669743009.jpg@140h_211w_1e_1c.jpg"/>
 	           					<span class="xpico"></span>
 	           				</div>
 	           				<div class="xwc2R-1">
 	           					<img src="http://img.szzhangchu.com/1439381040706_5770188842.JPG@140h_211w_1e_1c.jpg"/>
 	           					<span class="xpico"></span>
 	           				</div>
 	           				<div class="xwc2R-1">
 	           					<img src="http://img.szzhangchu.com/1441097167760_9981124068.jpg@140h_211w_1e_1c.jpg"/>
 	           					<span class="xpico"></span>
 	           				</div>
 	           				<div class="xwc2R-1">
 	           					<img src="http://img.szzhangchu.com/1441114608398_2405670669.jpg@140h_211w_1e_1c.jpg"/>
 	           					<span class="xpico"></span>
 	           				</div>
 	           			</div>
 	           		</div>
 	           		<div class="xwc3">
 	           			 最美的不是下午茶，是坐在我对面微笑的你。…
 	           		</div>

 	    		</div>

 	    		<!--全部场景（161）-->
 	    		<router-link to="/Changjing" class="xinp1 allcj">
 	                	<div>全部场景(161)<i class="ico ico-more"></i></div>
 	           	</router-link>

 	           	<!--美食专题-->
 	           	<div id="mszt">
 	           		<router-link to="Zhuanti" class="xinp1">
 	                	<div>美食专题<i class="ico ico-more"></i></div>
 	           		</router-link>
 	           		<router-link to="/zhuantiEji">
 	           			<img src="http://img.szzhangchu.com/1456912226464_1804712271.jpg@640w_215h_1e_1c.jpg"/>
 		           		<div class="msP">
 		           			<p class="msP1">煲个靓汤，心情瞬间变美</p>
 		           			<p class="msP2">情绪低落的单身汪，煲碗汤吧，喝汤能让人开心！</p>
 		           		</div>
 	           		</router-link>
					<br />
					<router-link to="/zhuantiEji">
 	           			<img src="http://img.szzhangchu.com/1450940619594_9550915967.png@640w_215h_1e_1c.jpg"/>
 		           		<div class="msP">
 		           			<p class="msP1">煲个靓汤，心情瞬间变美</p>
 		           			<p class="msP2">情绪低落的单身汪，煲碗汤吧，喝汤能让人开心！</p>
 		           		</div>
 	           		</router-link>
					
 	           	</div>

 	           	<div class="copyright">
 				    <p><a class="targetBlank" href="http://www.miibeian.gov.cn" target="_blank" style="color:#999;">粤ICP备14078563号</a> 深圳市金版文化数字传媒有限公司</p>
 				    <div style="width:100%;margin:0 auto; padding:20px 0;">
 				        <a class="targetBlank" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402000542" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
 				            <i class="icon_netsecurity" style="float:left;display: inline-block;background-image: url('http://pub.szzhangchu.com/web/v4.2/images/ico/icon_netsecurity.png');
 				            background-repeat: no-repeat;width: 20px;height: 20px;"></i>
 				            <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">粤公网安备 44030402000542号</p>
 				        </a>
 				    </div>
 				</div>

				<router-view keep-alive></router-view>

 	</div>


 </template>
 <script>
     export default {
     	mounted(){
     		this.banner();
     	},
         methods: {
         	 banner(){
	         	 	 var swiper = new Swiper('.swiper-container', {
			         pagination: '.swiper-pagination',
			         paginationClickable: true,
			         loop: true,
			         observe :　true,
			         autoplay: 2000
			     });
         	 },
             login(){
                 let that=this;
                //  localStorage.getItem("flag") 验证登录成功的情况
                 if(this.$store.state.loginstate == true ){
                     that.$router.push({
                         path: '/LoginSuccess'
                     })
                 }else{
//                   console.log(this.$store.state.loginstate);
                     that.$router.push({
                         path: '/Login'
                     })
                 }
             }
             
         }
     }
 </script>

 <style>
 	@import "http://pub.szzhangchu.com/web/v4.2/css/swiper.min.css"
 	#home-body{
 		position: relative;
 		overflow: hidden;
 		font-size: 0.28rem;
 		}
 	.header-top{
 		display: flex;
 		text-align: center;
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
 		height:0.8rem;
 		background-color:#ff7836;
 		border-bottom: 1px solid #f2f2f2;
 		padding: 0 0.2rem;

 		}
 	.header-top .h-left,.h-right{
 		width: 0.45rem;
 		}
 	.header-top .h-left a,.h-right a{
 			display: inline-block;
 			width: 100%;
 		}
 	.h-mid{
 		width: 4.7rem;
 		height: 0.55rem;
 		line-height: 0.55rem;
 		color: #828282;
 		border-radius: 0.05rem;
 		background: #fff;
 	}
 	.h-mid-2{
 		display: flex;
 		width: 100%;
 		justify-content: center;
 		font-size: 0.23rem;
 	}
 	.hico{
 		margin-right: 0.2rem;
 		display: inline-block;
 		width: 0.5rem;
 		height: 0.5rem;
 		background-image: url("http://pub.szzhangchu.com/web/v4.2/images/ico/ico-search-gray.png");
 		background-size: cover;
 	}

 	#nav{
 		width: 100%;
 		padding: 0.1rem 0;
 	}
 	#nav a{
 		display: inline-block;
 		margin: 0.1rem 0 0.1rem 0.45rem;
 		font-size: 0.28rem;
 		color: #464646;

 	}
 	.banner img{width:100%;}

 	.swiper-pagination-bullet{
     background-color: #d6b8b4;
     opacity: 1;

 	}
 	.swiper-pagination-bullet-active{
 	    background-color: #d46035;
 	}
 	.swiper-container-horizontal>.swiper-pagination{
 	    text-align: right;
 	    right:.2rem;
 	    bottom:0.2rem;
 	}
 	.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet{
 		width: 0.15rem;
     	height: 0.15rem;
   		margin: 0 0.05rem;

 	}

 	.nav2{
 		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
 		padding: 0.15rem 0.15rem 0;
 	}
 	.nav2 img{
 		width: 55%;
 	}
 	.nav2 p{
 		font-size: 0.28rem;
 		margin-top: 0.1rem;
 		color: #333333;
 	}
 	.nav2>a{
 		width: 1.5rem;
 		text-align: center;
 		margin: 0.1rem 0.2rem;
 	}
 	.nav2  .img{
 	    -webkit-animation: animation1 .9s;
 	}
 	@-webkit-keyframes animation1
 	{
 	    0%   {
 	        -webkit-transform: scale(0.2);
 	    }
 	    90%   {
 	        -webkit-transform: scale(1.1);
 	    }
 	    100% {
 	        -webkit-transform: scale(1);
 	    }
 	}
 	.nav2>.nav2-2{
 		display: block;
 		margin-top: 0.2rem;
 		width: 100%;
 		height: 0.7rem;
 		line-height: 0.7rem;
 		text-align: center;
 		border-top: 0.01rem solid #f2f2f2;
 		font-size: 0.28rem;

 	}
 	.nav2-2 .ico-more,.xinp1 .ico{
 		margin-left: 0.3rem;
 		display: inline-block;
 		width: 0.22rem;
 		height: 0.22rem;
 	    vertical-align: middle;
 	    background-image: url('http://pub.szzhangchu.com/web/v4.2/images/ico/ico-more-circle.png');
 	    background-repeat: no-repeat;
 	    background-size:100% 100%;
 	}
 	#xinpin{
 		width: 100%;
 		background: #eee;
 		height: 4rem;
 		padding-top: 0.1rem;

 	}
 	.xinp1{
 		display: block;
 		padding: 0.1rem 0;
 		background: #fff;
 		width: 100%;
 		height: 0.7rem;
 		line-height: 0.7rem;
 		text-align: center;
 		border-top: 0.01rem solid #f2f2f2;
 		font-size: 0.28rem;
 	}
 	.xinp2{
 		display: flex;
 		justify-content: space-between;
 		background: #fff;
 		padding:0.05rem 0 0.25rem 0;
 		text-align: center;
 		position: relative;
 	}
 	.xinp2 img{
 		width: 100%;
 		/*height: 1.5rem;*/
 	}
 	.xinp2>div{
 		width: 33.1%;
 	}
 	.xinp2-1-1p{
 		margin: 0.05rem;
 	}
 	.xinp2-1-2p{
 		color:#a0a0a0;
 		font-size: 0.21rem;
 		padding-left: 0.05rem;
 	}
 	.xpico{
 		display: block;
 		width: 0.5rem;
 		height: 0.5rem;
 		background: url("http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play.png") no-repeat;
 		background-size: 100% 100%;
 		position: absolute;
 		top: 25%;
 		margin-left: 0.8rem;
 	}
 	#xwc{
 		width: 100%;
 		background: #eee;
 		padding-top: 0.15rem;
 	}
 	.xwc2{
 		width: 100%;
 		display: flex;
 		background: #fff;
 		justify-content: space-between;
 	}
 	.xwc2 img{
 		width: 100%;
 	}
 	.xwc2L{
 		width: 33.1%;
 		position: relative;
 	}
 	.xwcbg{
 		    position: absolute;
 		    height: 2rem;
 		    overflow: hidden;
 		    width: 100%;
 		    bottom: 0;
 		    z-index: 3;
 		    border-radius: 0 0 4px 4px;
 		    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
 	}
 	.xwc2Lp{
 		position: absolute;
 		top: 60%;
 		left: 0.4rem;
 		color: #fff;
 		z-index: 4;
 		text-align: center;
 	}
 	.xwc2R{
 		width: 66.2%;
 		display: flex;
 		justify-content: space-between;
 		flex-wrap: wrap;
 	}
 	.xwc2R-1{
 		width: 49.6%;
 		position: relative;
 	}
 	.xwc3{
 		width: 100%;
 		height: 1rem;
 		line-height: 1rem;
 		background: #fff;
 		text-align: center;
 		color: #a0a0a0;
 		font-size: 0.23rem;
 	}
 	.allcj{
 		height: 1rem;
 		background: #eee;
 	}
 	#mszt{
 		width: 100%;
 		margin-bottom: 0.2rem;
 	}
 	#mszt>a{
 		display: block;
 	}
 	#mszt img{
 		width: 100%;
 	}
 	.msP{
 		width: 100%;
 		padding-left: 0.3rem;
 		line-height: 0.4rem;
 	}
 	.msP2{
 		font-size: 0.23rem;
 		color:#a0a0a0;
 	}
 	.copyright{
 		padding-top: 0.2rem;
 		background: #eee;
 		  /*padding-bottom: .6rem;*/
 		    font-size: .23rem;
 		    text-align: center;
 		    color: #999;
 		}
 </style>
